<template>
  <div class="admin-type-children">
    <my-collapse :handleClick="getType2Data" btn-open-text="展开二级分类">
      <el-button type="primary" size="mini" @click="dialogVisible=true" title="添加二级分类">
        <i class="el-icon-plus"></i>
      </el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="typeName" label="名称" width="180"></el-table-column>
        <el-table-column prop="type1Name" label="父类" width="180"></el-table-column>
        <el-table-column prop="remark" label="描述"></el-table-column>
        <el-table-column prop="rank" label="权重"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @current-change="currentChange"
        hide-on-single-page
        layout="prev, pager, next"
        :total="totalRow"
        :page-size="5"
      ></el-pagination>
    </my-collapse>
    <el-dialog title="添加二级分类" :visible.sync="dialogVisible">
      <children-add :closeDialog="closeDialog" :success="addSuccess" :id="id"></children-add>
    </el-dialog>
    <el-dialog title="修改二级分类" :visible.sync="editDialogVisible">
      <childrenEdit :closeDialog="closeDialog" :id="type2Id" :updateSuccess="updateSuccess"></childrenEdit>
    </el-dialog>
  </div>
</template>
<script>
import childrenAdd from "./children-add.vue";
import childrenEdit from "./children-edit.vue";

export default {
  name: "admin-type-children",
  props: ["id"],
  data: function() {
    return {
      dialogVisible: false,
      editDialogVisible: false,
      tableData: [],
      loading: false,
      pageNumber: 1,
      totalRow: 0,
      type2Id: null
    };
  },
  methods: {
    getType2Data() {
      this.loading = true;
      this.axios
        .post("videoType/getType2List", {
          id: this.id,
          pageNumber: this.pageNumber,
          pageSize: 5
        })
        .then(res => {
          this.totalRow = res.data.page.totalRow;
          this.tableData = res.data.page.list;
          this.loading = false;
        });
    },
    closeDialog() {
      this.dialogVisible = false;
      this.editDialogVisible = false;
    },
    addSuccess(data) {
      this.getType2Data();
    },
    updateSuccess() {
      this.getType2Data();
    },
    currentChange(val) {
      this.pageNumber = val;
      this.getType2Data();
    },
    edit(row) {
      this.type2Id = row.id;
      this.editDialogVisible = true;
    },
    //删除
    del(row) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios.post("videoType/delType2", { id: row.id }).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getType2Data();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  components: {
    childrenAdd,
    childrenEdit
  }
};
</script>

<style scoped>
.admin-type-children {
  padding-left: 20px;
}
</style>